<template>
    <Suspense>
        <template v-slot:default>
            <Child/>
        </template>
        <template v-slot:fallback>
            <h3>加载中.....</h3>
        </template>
    </Suspense>
    <p>姓名：{{ name }}</p>
    <p>初始年龄：{{ age }}</p>
    <p>当前年龄：{{ curAge }}</p>
    <div>
        学生信息：
        <p>姓名：{{student.name}}</p>
        <p>性别：{{student.sex}}</p>
        <p>地址：{{student.address}}</p>
    </div>
    <el-row>
        <el-col :span="24">
            <el-button type="primary" @click="add">长大一岁</el-button>
        </el-col>
        <el-col :span="24">
            <el-button type="success" @click="addressChange">修改地址</el-button>
        </el-col>
    </el-row>


</template>
<script >
    // ref 是 vue 3.0 的一个重大变化，其作用为创建响应式的
    // 导出依然是个对象，不过对象中只有一个 setup 函数
    import { ref, reactive,watch,watchEffect,defineAsyncComponent } from "vue"; //使用前，先引入
    // import Child from '../components/child' //静态引入
    const Child = defineAsyncComponent(()=>import('../components/child.vue')) //异步引入

    export default {
        name: "",
        components: {
            Child
        },
        // setup() 函数是 vue3 中，专门为组件提供的新属性。
        // 它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。
        setup() {
            let name = ref("小明");
            let age = 18;
            let curAge = ref(age); //ref包裹普通数据
            console.log("name", name);
            //reactive包裹对象
            const student = reactive({
                name: "小白",
                sex: "男",
                address: "上海",
            });

            const add = () => {
                curAge.value++; //ref值获取要用.value
                // age++;
                console.log("age", age);
                console.log("curAge", curAge.value);
            };
            const addressChange = () => {
                student.address += "浦东";
            };
            // 监听时需要手动添加依赖
            // immediate 默认执行一次watch  deep 深度监听
            // watch(student,()=>{
            //     student.name = '小黑'
            // },{immediate:true,deep:true});
            // watchEffect 监听时不需要手动添加依赖
            watchEffect(()=>{
                student.name = '小红'
            })
            // 区别
            // 1、watch 是需要传入侦听的数据源，而 watchEffect 是自动收集数据源作为依赖。
            // 2、watch 可以访问侦听状态变化前后的值，而 watchEffect 没有。
            // 3、watch 是属性改变的时候执行，而 watchEffect 是默认会执行一次，然后属性改变也会执行。
            return {
                name,
                age,
                curAge,
                add,
                student,
                addressChange,
            };
        },

        methods:{

        }
    };
</script>
